<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>局部组件注册</title>
</head>
<body>
<div id="app">
    <hello-world></hello-world>
    <hello-tom></hello-tom>
    <hello-jerry></hello-jerry>

    <test-com></test-com>
</div>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
    /*
    局部组件祖册
    局部组件只能在注册他的父组件中使用
     */
    Vue.component("test-com", {
        template: "<div>Test <hello-world></hello-world></div>"
    })

    var helloWorld = {
        data: function () {
            return {
                msg: "HelloWorld"
            }
        },
        template: "<div>{{msg}}</div>"
    }

    var helloTom = {
        data: function () {
            return {
                msg: "helloTom"
            }
        },
        template: "<div>{{msg}}</div>"
    }

    var helloJerry = {
        data: function () {
            return {
                msg: "helloJerry"
            }
        },
        template: "<div>{{msg}}</div>"
    }


    var vue = new Vue({
        el: "#app",
        data: {},
        components: {
            "hello-world": helloWorld,
            "hello-tom": helloTom,
            "hello-jerry": helloJerry
        }
    })
</script>
</body>
</html>
